<template>
  <div id="app">
    <h2>我是APP组件</h2>
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
<!--    <router-link to="/profile">档案</router-link>-->

<!--    <router-link :to="'/user/' + userId">用户</router-link>-->
<!--    <router-link :to="{path: '/profile', query: {name: 'why', age: 18, height: 1.78}}">档案</router-link>-->
    <button @click="userClick">用户</button>
    <button @click="profileClick">档案</button>

    <!--  注意：这里逗号后面不能加空格  -->
    <keep-alive exclude="User,Profile">
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>

export default {
  name: 'App',

  data() {
    return {
      userId: 'zhangshan',
      imgURL: 'http://www.baidu.com/logo.png'
    }
  },
  methods: {
    profileClick() {
      this.$router.push({
        path: '/profile',
        query: {
          name: 'kobe',
          age: 19,
          height: 1.87
        }
      })
    },
    userClick() {
      this.$router.push('/user/' + this.userId)
    }
  }
}
</script>

<style>

.active {
  color: #f00;
}
</style>
